<template>
	<view class="details">
		<scroll-view scroll-x="true" enable-flex="true">
		<view class="details-one" v-for="(item,index) in Fund" :key='index' @click="xiangqin(item.fundCode)">
			<view class="one-tile">
				<view>基金</view>
				<view>
					<text style="font-size: 30rpx;">{{item.fundName}}</text>
				</view>
			</view>
			<view class="one-num">
				<view>
					<view>
					<text>日涨跌幅</text>
					</view>
					<view>
					<text style="font-size: 35rpx;">{{item.dayOfGrowth}}%</text>
					</view>
				</view>
				<view>
					<view>
					<text>最新净值(03-01)</text>
					</view>
					<view>
					<text style="font-size: 35rpx;" >{{item.fundValue}}%</text>
					</view>
				</view>	
			</view>
			<view class="one-style">
				<view>
					<text>{{item.fundType}}</text>
				</view>
				<view>
					<text>{{item.fundStatus}}</text>
				</view>
			</view>
		</view>
		</scroll-view>
		<view class="details-two">
			<view class="two-title">				
				<!-- <view v-if="item==subb" class="borb" :key="item">{{item}}</view> -->
				<view v-for="(item,index) in sub" :class="{borb:item==subb}" :key="index" @click="subb=item">{{item}}</view>				
			</view>
			<view class="two-two">
				<view>
				<view></view>
				<view>本基金
				<text :class="number>=0?'col':''">+18.97</text>%
				</view>
				</view>
				<view>
				<view></view>
				<view>沪深300:
				<text :class="number>=0?'col':''">+37.53</text>%
				</view>
				</view>
			</view>
			<view class="two-three">
				<my-chart :days='days' :newData='newData'></my-chart>
			</view>
			<view class="two-four">
				<template v-for="(item,index) in list" >
				<view v-if="btn==item" class="bgc" :key="index">{{item}}</view>
				<view v-else :key="item" @click="checkco(item)">{{item}}</view>
				</template>
			</view>
		</view>
		<view class="details-three">
			<view class="three-title">
				<text>阶段业绩</text>
			</view>
			<view class="three-two">
				<view>
					<text>日期</text>
				</view>
				<view>
					<text>本产品</text>
				</view>
				<view>
					<text>国债指数</text>
				</view>
				<view>
					<text>同类排名</text>
				</view>
			</view>
			<view class="three-d">
			<view v-for="item in pro" :key="item.id" class="three-three">
				<view >
					<text >{{item.day}}</text>
				</view>
				<view class="fon">
					<text :class="item.name>=0?'col':'col2'">{{item.name}}%</text>
				</view>
				<view class="fon">
					<text :class="item.num>=0?'col':'col2'">{{item.num}}%</text>
				</view>
				<view >
					<text>{{item.fo}}</text>
					<text>{{item.to}}</text>
				</view>
			</view>			
		    </view>
			<view class="three-four">
		    	<text>年度业绩</text>
		    </view>
			<view class="three-five">
				<view>
					<text>年度</text>
				</view>
				<view>
					<text>回报率(%)</text>
				</view>
				<view>
					<text>同类平均</text>
				</view>			
			</view>
		    <view class="three-six" v-for="item in year" :key="item.id"> 
				<view>
					<text>{{item.day}}</text>
				</view>
				<view class="con">
					<text :class="item.name>=0?'col':'col2'">{{item.name}}%</text>
				</view>
				<view class="con">
					<text :class="item.num>=0?'col':'col2'">{{item.num}}%</text>
				</view>
			</view>
		</view>
		<view class="details-four">
			<view class="four-title">
				<text>特色数据</text>
			</view>
			<view class="four-two">
		        <view>23.35%</view>
				<view>3.34%</view>
				<view>-18.54%</view>
			</view>
			<view class="four-three">
				<view>
					<text>近一年波动率</text>
				</view>
				<view>
					<text>近一年增比率</text>
				</view>
				<view>
					<text>近一年最大汇率</text>
				</view>
			</view>
		</view>
		<view class="details-five">
			<view >买入</view>
			<view @click="bought">定投</view>
		</view>
	</view>
</template>

<script>
	import { createNamespacedHelpers } from "vuex";
	const { mapActions,mapState } = createNamespacedHelpers("jijin");
	import myChart from '../../components/mychart/mychart.vue'
	export default {
		computed:{
			...mapState(['Fund','days','newData'])
		},
		created(){
			this.getFunds()
			// this.fundPerformances({
			// 	fundCode:this.code,
			// 	row:'1'
			// })
		},
		data() {
			return {
				number:1,
				list:["近一月","近三月","近半年","近一年"],
				btn:"近一月",
				sub:["业绩走势","净值走势","七日年化"],
				subb:"业绩走势",
				pro:[
					{id:1,day:"近一周",name:"-0.91",num:"-0.03",fo:"2223",to:"/2799"},
					{id:2,day:"近一月",name:"-0.91",num:"-0.03",fo:"2223",to:"/2799"},
					{id:3,day:"近三月",name:"+0.91",num:"+0.03",fo:"2223",to:"/2799"},
				],
				year:[
					{id:1,day:"2020",name:"+55.22",num:"+58.22"},
					{id:2,day:"2019",name:"+55.22",num:"+58.22"},
					{id:3,day:"2018",name:"+55.22",num:"+58.22"},
				],
				code:'',
			}
		},
		methods: {
			...mapActions(['getFunds','fundPerformances']),
			checkco(item){
				this.btn=item;
				if(this.btn == '近一月'){
					this.fundPerformances({
						fundCode:this.code,
						row:'1'
					})
				}else if(this.btn == '近三月'){
					this.fundPerformances({
						fundCode:this.code,
						row:'2'
					})
				}else if(this.btn == '近半年'){
					this.fundPerformances({
						fundCode:this.code,
						row:'3'
					})
				}
				console.log(item)
			},
			bought(){
				uni.showModal({
					title: '提示',
					content: '根据金融监管机构要求，在您投资前先完成风险测评问卷，进一步了解自身的投资风险及风险承受能力（预计[耗时80秒]）。在您购买产品时，我们将根据测评结果，进行风险等级匹配检查和风险提示，请您关注。',
					
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({
								url:"/pages/appraisal/appraisal"
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			xiangqin(fundCode){
				this.code = fundCode
				console.log(fundCode)
				this.fundPerformances({
					fundCode:fundCode,
					row:'1'
				})
			}
		},
		components:{
			myChart
		}
	}
</script>

<style lang="scss" scoped>
	scroll-view{
		display: flex;
		height:300rpx;
		width: 100vw;
	}
	.col{
		color:#ff5a44;
	}
	.col2{
		color:#1ab299;
	}
	.bgc{
		background-color: #ff4658;
		color: white !important;
	}
	.borb{
		border-bottom: 2px solid red;
	}
	.col{
		color:#ff623c;
	}
	.details{
		margin-bottom: 100rpx;
		background-color:#fafafa ;
		box-sizing: border-box;
		height:100%;
		width:100%;
		padding:24rpx;
		.details-one{
			width:700rpx !important;
			height:284rpx;
			background-color: white;
			border-radius:20rpx;
			box-sizing: border-box;						
			padding:24rpx;
			margin-right: 30rpx;
			.one-tile{
				display:flex;
				 // justify-content: space-around;
				view:first-child{
					width:15%;
					height:42rpx;
					line-height: 42rpx;
					text-align:center;
					background-color: #ff4658;
					border-radius: 10rpx;
					color:white;
				}
				view:last-child{
					font-weight: bolder;
					font-size: 30rpx;
					margin-left: 30rpx;
				}
			}
            .one-num{
				margin-top: 10rpx;
				display:flex;
				height:50%;
				width: 600rpx;
				// justify-content: space-between;
				>view view:last-child{
					margin-top: 12rpx;
					color:#ff4658;
					font-weight: bold;
					text{
						font-size:50rpx;
					}
				}
				>view view:first-child{
					color:#e2e2e2;
				}
				>view:last-child{
					margin-left:150rpx ;
				}
			}
		    .one-style{
				display:flex;
				height:30%;
				margin-top: 10rpx;
				view{
					width:120rpx;
					border: 1rpx solid #e2e2e2;
					height:40rpx;
					color: #e2e2e2;
					border-radius: 10rpx;
					// line-height:30%;
					margin-right: 24rpx;
					font-size: 24rpx;
					text-align: center;
				}
			}
		}
	    .details-two{
			margin-top: 40rpx;
			width:100%;
			// height:682rpx;
			background-color: white;
			border-radius:20rpx;
			box-sizing: border-box;						
			padding:24rpx;
			.two-title{
				display:flex;
				justify-content: space-around;
				view{
					font-size:34rpx;
					font-weight: bold;
				}
			}
		    .two-two{
				display:flex;
				justify-content: space-between;
				margin-top: 26rpx;
				height:30rpx;
				line-height: 30rpx;
				>view{
					display:flex;
					// justify-content: space-between;
					line-height: 18rpx;
				}
				>view view:first-child{
					margin-right: 16rpx;
					width:18rpx;
					height:18rpx;
					border-radius: 18rpx;
					background-color: #ff623c;
				}
			} 
		    .two-four{					
				height:54rpx;
				line-height: 54rpx;
				display:flex;
				justify-content: space-around;
				margin-top: 20rpx;
				border: 1px solid #cdcdcd;
				view:first-child{
					border-left:none;
				}
				view{
					color:#cdcdcd;
					font-size: 28rpx;
					width:25%;
					border-left: 0.5px solid #cdcdcd;
					// border-radius: 15rpx;
					text-align: center;
				}
			}
		}
	    .details-three{
			margin-top: 40rpx;
			width:100%;
			background-color: white;
			border-radius:20rpx;
			box-sizing: border-box;						
			padding:24rpx;
			.three-title{
				width:100%;				
				font-size:34rpx;
				font-weight: bold;				
			}
			.three-two{
				height:54rpx;
					line-height: 54rpx;
					display:flex;
					justify-content: space-between;
					margin-top: 20rpx;
					view{
						width:25%;
						text-align: center;
						color:#999999;
						font-size: 28rpx;
					}
				
			}
			.three-d{
				width:100%;
				border-bottom: 1px solid #c6c6c6 !important;
				padding-bottom:40rpx;
			}
		    .three-three{
				display:flex;
				justify-content: space-between;
				margin-top: 20rpx;
				
				view{
					width:25%;
					text-align: center;	
				}
				.fon{
					font-weight: bold;
				}
				view:last-child text:last-child{
					color:#999999;
				}
				
			}
		    .three-four{
					width:100%;
					font-size:34rpx;
					font-weight: bold;
					margin-top: 40rpx;
					height:50rpx;
				}
			.three-five{
				display:flex;
				justify-content: space-between;
				margin-top: 20rpx;
				color:#999999;
				view{
					width:33%;
					text-align: center;
				}
			}	
			.three-six{
				display:flex;
				justify-content: space-between;
				margin-top: 20rpx;
				view{
					width:33%;
					text-align: center;
				}
				.con{
					font-weight: bold;
				}
			}
		}
	    .details-four{
			margin-top: 40rpx;
			width:100%;
			background-color: white;
			border-radius:20rpx;
			box-sizing: border-box;						
			padding:24rpx;
			.four-title{
				width:100%;
				font-size:34rpx;
				font-weight: bold;	
			}
			.four-two{
				margin-top: 30rpx;
				display:flex;
				justify-content: space-around;
				font-size: 36rpx;
				font-weight: bold;
			}
			.four-three{
				margin-top: 10rpx;
				display:flex;
				justify-content: space-around;
				color:#999999;
				font-size: 24rpx;
			}
		}
	    .details-five{
			width:100%;
			height:100rpx;
			margin-top: 40rpx;
			position:fixed;
			display:flex;
			right:0rpx;
			justify-content: space-around;
			bottom: 0rpx;
			line-height: 100rpx;
			text-align: center;
			view:first-child{
				width:50%;
				background-color: white;
				font-weight: bold;
				font-size: 36rpx;
			}
			view:last-child{
				width:50%;
				background-color:#ff4658 ;
				color:white;
				font-weight: bold;
				font-size: 36rpx;
			}
		}
	}
	


</style>
